<script>
import { mapGetters } from 'vuex';
import { scatterMap } from '../../chartconfig/config/map-config.js';
import * as types from '../../../../store/types.js';
import * as utils from '../../../../utils/helps.js';
// 默认配置

export default {
  name: 'ScatterMapConfig',
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    subjectId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      maplayerOptions: { ...scatterMap },
      maplayerParams: [],
      defalutParams: '',
      selected: '1',
      positionList: [
        { value: 'topleft', label: '左上' },
        { value: 'bottomleft', label: '左下' },
        { value: 'topright', label: '右上' },
        { value: 'bottomright', label: '右下' },
      ],
      opacity: 100,
      getSubjectId: this.subjectId,
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    chartOptions() {
      return this.controls[this.currentId].options;
    },
  },
  watch: {
    subjectId(newVal) {
      if (newVal !== '') {
        this.getScatterMapOptions(newVal);
      }
    },
  },
  beforeCreate() {
    this.opacity = scatterMap.opacity * 100;
  },
  mounted() {
    this.getScatterMapOptions(this.subjectId);
  },
  events: {
    'on-setconfig': 'setConfig',
  },
  methods: {
    setConfig(subId) {
      this.subjectId = subId;
    },
    // 拿到options
    getScatterMapOptions(subjectId) {
      if (this.getSubjectId !== '') {
        if (this.chartOptions.ScatterMap) {
          const scatterMapOptions = this.chartOptions.ScatterMap.filter(
            item => item.subjectId === subjectId
          );

          this.opacity = scatterMapOptions[0].options.opacity * 100;
          this.maplayerOptions = {
            ...scatterMapOptions[0].options,
            ...this.opacity,
          };

          const allParams = scatterMapOptions[0].data.features[0].properties;
          for (const key in allParams) {
            if (typeof allParams[key] === 'number') {
              this.maplayerParams.push({
                value: key,
                label: key,
              });
            }
          }
          this.defalutParams = this.maplayerParams[0].value;
        }
      }
    },
    //提交配置到store
    updateOptions() {
      let currentControl = this.controls[this.currentId];
      const maplayerOptions = utils.deepCopy(this.maplayerOptions);
      maplayerOptions.opacity = this.opacity / 100;
      for (const key in this.chartOptions.ScatterMap) {
        if (this.chartOptions.ScatterMap[key].subjectId === this.getSubjectId) {
          this.chartOptions.ScatterMap[key].options = maplayerOptions;
        }
      }
      currentControl.options = this.chartOptions;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.currentId]: currentControl },
      });
    },
  },
};
</script>

<template>
  <div class="datav-scattermap-config">
    <Row>
      <Col span="24">
      <Collapse v-model="selected">
        <Panel name="1">
          <span class="property-label labeltitle">关联字段选择</span>
          <div slot="content">
            <Row>
              <Col span="8">
              <span class="property-label">字段：</span>
              </Col>
              <Col span="16">
              <Select v-model="defalutParams">
                <Option
                  v-for="item in maplayerParams"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
            </Row>
          </div>
        </Panel>
        <Panel name="2">
          <span class="property-label labeltitle">图层样式</span>
          <div slot="content">
            <Row>
              <Col span="10">
              <span class="property-label">散点颜色：</span>
              </Col>
              <Col span="14">
              <ColorPicker
                v-model="maplayerOptions.radiuColor"
                @on-change="updateOptions"/>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">散点高亮颜色：</span>
              </Col>
              <Col span="14">
              <ColorPicker
                v-model="maplayerOptions.radiuHighColor"
                @on-change="updateOptions"/>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">阴影颜色：</span>
              </Col>
              <Col span="14">
              <ColorPicker
                v-model="maplayerOptions.shadowColor"
                @on-change="updateOptions"/>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">散点透明度：</span>
              </Col>
              <Col span="14">
              <Slider
                v-model="opacity"
                :min="0"
                :max="100"
                @on-change="updateOptions"></Slider>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">阴影模糊级别：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="50"
                :min="1"
                v-model="maplayerOptions.shadowBlur"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">散点最大半径：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="50"
                :min="1"
                v-model="maplayerOptions.maxRadiuSize"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
            <Row>
              <Col span="10">
              <span class="property-label">散点最小半径：</span>
              </Col>
              <Col span="14">
              <InputNumber
                :max="50"
                :min="1"
                v-model="maplayerOptions.minRadiuSize"
                @on-change="updateOptions"></InputNumber>
              </Col>
            </Row>
          </div>
        </Panel>
        <Panel name="3">
          <span class="property-label labeltitle"> 图例</span>
          <div slot="content">
            <Row>
              <Col span="10">
              <span class="property-label">是否显示：</span>
              </Col>
              <Col span="14">
              <Switch
                v-model="maplayerOptions.legendShow"
                @on-change="updateOptions"
              ></Switch>
              </Col>
            </Row>
            <Row v-if="maplayerOptions.legendShow">
              <Col span="10">
              <span class="property-label">位置:</span>
              </Col>
              <Col span="14">
              <Select
                v-model="maplayerOptions.position"
                @on-change="updateOptions">
                <Option
                  v-for="item in positionList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
            </Row>
          </div>
        </Panel>
        <Panel name="4">
          <span class="property-label labeltitle">提示框</span>
          <div slot="content">
            <Row>
              <Col span="10">
              <span class="property-label">是否显示：</span>
              </Col>
              <Col span="14">
              <Switch
                v-model="maplayerOptions.tooltipShow"
                @on-change="updateOptions"
              ></Switch>
              </Col>
            </Row>
            <Row v-if="maplayerOptions.tooltipShow">
              <Col span="10">
              <span class="property-label">提示框文字:</span>
              </Col>
              <Col span="14">
              <Input
                v-model="maplayerOptions.formatter"
                placeholder="输入提示内容..."
                @on-change="updateOptions"></Input>
              </Col>
            </Row>
          </div>
        </Panel>
      </Collapse>
      </Col>
    </Row>
  </div>
</template>

<style lang="less" scoped>
.datav-scattermap-config {
  width: 100%;
  height: 100%;

  .property-label {
    height: 32px;
    line-height: 32px;
  }

  /deep/.k-collapse-header {
    padding-left: 15px;
  }

  .k-row {
    margin-bottom: 5px;
  }
}
</style>
